import { useNavigate } from "react-router-dom";
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
  const navigate = useNavigate();
  const goLogin = () => {
    navigate("/login", { state: { name: "顿健康", age: 18 } });
  };
  const goBoard = () => {
    navigate("/");
  };
  const goArticle = () => {
    navigate("/article/顿健康");
  };
  return (
    <div>
      this is Layout
      <div>
        <button onClick={() => navigate("/about?id=1001")}>go about</button>
        <button onClick={goLogin}>go login</button>
        <button onClick={goBoard}>go board</button>
        <button onClick={goArticle}>go article</button>
      </div>
      <div></div>
      <div>
        {/* <Link to="/board">面板</Link> */}
        <Link to="/">面板</Link>
        <Link to="/article/张三">文章</Link>
      </div>
      {/* 二级路由渲染出口 */}
      <Outlet />
    </div>
  );
};

export default Layout;
